<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全局组件</title>

</head>
<body>


<div id="app">
    <heima60></heima60>
</div>

<hr/>
<div id="bpp">
    <heima60></heima60>
</div>


<script src="../node_modules/vue/dist/vue.js"></script>
<script>

    //局部组件在注册为组件之前，并不知道自己是组件

    let heima60 = {
        template: `<div>
                <button @click="increment">点我长一岁</button><br/>
                我是组件，heima60，名字:{{name}},今年：{{age}} 岁
        </div>`,
        data() {
            return {
                name: "刘德华",
                age: 50
            }
        },
        methods: {
            increment() {
                this.age++
            }
        }
    };

    let app = new Vue({
            el: "#app",
            components: {
                heima60
            }
        });

    let bpp = new Vue({
        el:"#bpp"
    });
</script>
</body>
</html>